import { Card } from 'antd';
import { useState, useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import { getOption } from './echartsOptions';
import zfzhPng from '../images/政府综合减灾资源.png'
import SouyeApi from '../../../../../../utils/apis/SouyeApi';
export default function Zfzhjznl(props) {
    const chartRef = useRef();

    const [data,setData]=useState([])
    const [jzzyzl,setJzzyzl]=useState("政府综合减灾资源")
   
    useEffect(()=>{
        SouyeApi.jzzy_find(jzzyzl).then(resp=>{
            setDatas(resp.data.map(e => {
                const a = {}
                a.name = e.jzzyxl
                a.value = e.count
                a.jzzyxl = e.jzzyxl
                return a
            }))
        })
    },[jzzyzl])

    const [datas, setDatas] = useState([{
        name: '灾害管理能力',
        jzzyxl: '政府灾害管理能力',
        value: 33
    }, {
        name: '专职救援队伍',
        jzzyxl: '综合性、政府专职和企业专职消防救援队伍与装备',
        value: 35
    }, {
        name: '森林消防队伍',
        jzzyxl: '森林消防队伍与装备',
        value: 10
    }, {
        name: '航空护林站队伍',
        jzzyxl: '航空护林站队伍与装备',
        value: 8
    }, {
        name: '地震专业救援队伍',
        jzzyxl: '地震专业救援队伍与装备',
        value: 16
    }, {
        name: '矿山/隧道救援队伍',
        jzzyxl: '矿山/隧道行业救援队伍与装备',
        value: 7
    }, {
        name: '危化/油气救援队伍',
        jzzyxl: '危化/油气行业救援队伍与装备',
        value: 6
    }, {
        name: '救灾物资储备库',
        jzzyxl: '救灾物资储备库（点）',
        value: 44
    }, {
        name: '应急避难所',
        jzzyxl: '应急避难所',
        value: 57
    }])

    useEffect(() => {
        const chart = echarts.init(chartRef.current);
        const option = getOption(datas);
        chart.setOption(option)
    }, [datas])

    return <>
        <Card title={<div className='layout-h center'>
            <img src={zfzhPng} alt='' style={{
                width: 22,
                marginRight: 8
            }} />
            <div>政府综合减灾能力</div>
        </div>} bordered={false} bodyStyle={{
            height: 300
        }}>
            <div className='wh100' ref={chartRef}></div>
        </Card>
    </>;
}